<template>
  <a :class="classStr" :href="to" @click="clickHandler"><slot></slot></a>
</template>

<script>
export default {
  props: {
    to: String,
  },
  computed: {
    active() {
      return this.$router.data.current.startsWith(this.to)
    },
    exactActive() {
      return this.$router.data.current === this.to
    },
    classStr() {
      const classes = []
      if (this.active) {
        classes.push('router-link-active')
      }
      if (this.exactActive) {
        classes.push('router-link-exact-active')
      }
      return classes.join(' ')
    }
  },
  methods: {
    clickHandler(e) {
      e.preventDefault()
      if (this.$router.options.mode === 'history') {
        history.pushState({}, '', this.to)
      } else {
        location.href = '#' + this.to
      }
      this.$router.data.current = this.to
    }
  }
};
</script>
